<template>
  <div class="v-avatar-list flex" :class="{ disabled: disabled }">
    <template v-for="(item, index) in value">
      <v-avatar-item
        v-if="index < calMax"
        :disabled="disabled"
        :key="item.i"
        :value="item[imgAttr]"
        :valueItem="item"
        :showHoverText="showHoverText"
        :hovertext="item[hovertextAttr]"
        :style="style"
      ></v-avatar-item>
    </template>
    <span
      class="v-avatar_leave"
      :class="{ disabled: disabled }"
      v-if="leaveNum"
      :style="style"
      >+{{ leaveNum }}</span
    >
  </div>
</template>
<script>
import Emitter from "../../assets/emitter";
import VAvatarItem from "../avatarList/avatarItem.vue";
export default {
  name: "VAvatarList",
  componentName: "VAvatarList",
  mixins: [Emitter],
  components: {
    VAvatarItem,
  },
  data() {
    return {
      style: {
        width: this.imgWidth,
        height: this.imgWidth,
        lineHeight: this.imgWidth,
      },
    };
  },
  props: {
    value: {},
    disabled: Boolean,
    max: Number,
    imgAttr: String,
    imgWidth: String,
    hovertextAttr: String,
    showHoverText: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    leaveNum() {
      return this.value.length - this.calMax;
    },
    calMax() {
      const len = this.value.length;
      const max = this.max || len;
      return len < this.max ? len : max;
    },
  },
  methods: {},
  created() {
    if (this.showHoverText && !this.hovertextAttr) {
      console.error("缺少hovertextAttr属性");
    }
  },
};
</script>
<style lang="less" scoped></style>
